<template>
  <div class="app-container" v-show="isShowIndex">
    <header>
   <el-card class="welcomeCard">
          <div class="welcomeCard_top">
            <img v-bind:src="options.img" class="img-circle img-lg" />
            <!-- <div class="block"><el-avatar :size="80" :src="options.img"></el-avatar></div> -->
            <h2 :style="style">欢迎，{{ user.nickName }}</h2>
            <div class="block_deit">
              <p>访问情况：今日访问次数{{ homepage.tadayCount }}次</p>
              <p>上次登录：{{ homepage.lastTime }}</p>
            </div>
          </div>
          <dbDetailButton ref="dbDetailRef"></dbDetailButton>
        </el-card>
        <el-card class="searchCard">
          <!-- <div style="display: flex; justify-content: center;">
            <el-input placeholder="请输入内容" v-model="input" style="width: 90%;">
              <template slot="prepend">全文</template>
              <el-button slot="append" icon="el-icon-search" ></el-button>
            </el-input>
          </div> -->
          <div class="searchCard_main">
            <p class="searchCard_main_p"> 全文</p>
            <div class="searchCard_main_input">
              <el-input placeholder="请输入内容" v-model="input" style="width: 90%;"></el-input>
              <i class="el-icon-search" style="" @click="fullText"></i>
            </div>
          </div>
          <quickEntryButton ref="quickEntryRef"></quickEntryButton>
        </el-card>
    </header>

    <div class="footer">
      <infoConfiguration ref="configurationRef"></infoConfiguration>
    </div>
  </div>
</template>


<script>
import store from "@/store";
import { syInfo } from "@/api/homePage";
import { getUserProfile } from "@/api/system/user";
import quickEntryButton from "@/views/homepage/quickEntryButton"
import InfoConfiguration from "@/views/homepage/infoConfiguration";
import DbDetailButton from "@/views/homepage/dbDetailButton";
export default {
  name: "Index",
  components: { DbDetailButton, InfoConfiguration, quickEntryButton },
  data() {
    return {
      // 是否展示首页
      isShowIndex: false,
      // 照片信息
      options: {
        img: store.getters.avatar, //裁剪图片的地址
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 50, // 默认生成截图框宽度
        autoCropHeight: 50, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        outputType: "png" // 默认生成截图为PNG格式
      },
      // 用户信息
      user: {},
      // 首页信息
      homepage: {},
      // 全文
      input: "",
      // 快捷入口
      quickEntryInfo: [],
      // 首页配置
      info: [],
      // 待办事项
      dbInfo: [],
      // 对应数目
      dbCount: {},
      style: ''
    }
  },
  created() {
    this.getUser()

  },
  activated() {
    this.getUser()
  },
  methods: {
    // 获取用户信息
    getUser() {
      getUserProfile().then(response => {
        console.log(response)
        this.user = response.data;
        if (this.user.nickName.length < 7) {
          this.style = 'font-size: 3.6vh;line-height: 4.5vh;width: 35vh'
        } else if (this.user.nickName.length > 6 && this.user.nickName.length < 12) {
          this.style = 'font-size: 3vh;line-height: 4.5vh;width: 35vh'
        } else {
          this.style = 'font-size: 2vh;line-height: 4.5vh;width: 35vh'
        }
        if (response.data.userName == 'sysadmin' || response.data.userName == 'syssso' || response.data.userName == 'sysauditor' || response.data.userName == '后台管理员'||response.data.userName == 'manager') {
          this.isShowIndex = false
        } else {
          this.isShowIndex = true
          this.getInfo()
        }
      });
    },
    // 获取首页信息
    getInfo() {
      syInfo().then(response => {
        console.log(response)
        response.data.lastTime = response.data.lastTime.substring(0, 19);
        this.homepage = response.data
        this.dbCount = response.data.dbCount
        this.quickEntryInfo = response.data.kjInfo
        this.$nextTick(() => {   //此函数执行时所有的DOM挂载和渲染都已完成
          this.$refs.quickEntryRef.init(this.quickEntryInfo);     //获取子组件中init方法并将父组件数据传递给子组件
        });
        this.info = response.data.zsInfo
        this.$nextTick(() => {
          this.$refs.configurationRef.init(this.info)
        })
        this.dbInfo = response.data.dbInfo
        this.$nextTick(() => {
          console.log("111111111111111111111:"+this.dbInfo, this.dbCount)
          this.$refs.dbDetailRef.init(this.dbInfo, this.dbCount)
        })
      })
    },
    // 全文检索
    fullText() {
      this.$router.push({
        path: '/archiveBorrow/fullTextSearch',
        query: {
          keyword: this.input,
        },
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.app-container{
  padding: 2vh!important;
}
p{
  margin: 0;
  padding: 0;
}
header {
  display: flex;
  width: 100%;
}

.footer {
  display: flex;
  width: 100%;
}

.img-circle {
  width: 10vh;
  height: 10vh;
}

.welcomeCard {
  .welcomeCard_top {
    margin: 1vh 5% 1% 2%;
    display: flex;
    align-items: center;

    h2 {
      display: inline-block;
      //font-size: 3.6vh;
      line-height: 8vh;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
      margin: 0 2%;
      padding-right: 2%;
    }

    .block_deit p {
      margin: 0;
      font-size: 1.5vh;
    }

    .block_deit {
      line-height: 28px;
      position: relative;
      padding: 0 20px;
    }

    .block_deit::before {
      border-left: 0.4vh solid #DCDFE6;
      content: "";
      position: absolute;
      top: 8px;
      left: 0;
      background-size: cover;
      height: 41px;

    }
  }
}

.searchCard,
.welcomeCard {
  width: 100%;
  margin: 0 0.8vh;
  height: 28vh;
}

.searchCard {
  display: flex;
  align-items: center;
}

.searchCard_main {
  width: 90%;
  height: 5vh;
  padding: 0.4vh 0 0.4vh 0;
  border: 0.3vh solid rgb(24, 144, 255);
  border-radius: 50px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .searchCard_main_p{
    font-size: 1.8vh;
    font-weight: 500;
    color: #909399;
    line-height: 4vh;
    border-right: 0.1vh solid rgb(24, 144, 255);
    width: 12%;
    text-align: center;
    font-family: "微软雅黑", SimSun, serif;
  }
  .searchCard_main_input{
    width:88%!important;
   display: flex;
   justify-content: space-between;

  }

}

::v-deep .el-icon-search{
  width: 10%;
  text-align:center;
  line-height: 4vh;
}
::v-deep .el-icon-search::before{
    font-size: 2.8vh;
    color: rgb(24, 144, 255);
    cursor: pointer;
   }
::v-deep .el-input--medium .el-input__inner{
  line-height: 4vh;
  height: 4vh;
  border: 0;
}
::v-deep .el-input--small .el-input__inner {
  line-height: 4vh;
  height: 4vh;
  border: 0;
}
::v-deep .el-card__body {
  width: 99%;
  padding: 2vh!important;
}

</style>

